<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *
    {
        margin: 0;
        padding: 0;
    }
    #box1
    {
        width: 100px;
        height: 10px;
        background-color: red;
        position: absolute;
        left:0;
    }
    #box2
    {
        width: 1px;
        height: 1000px;
        border-left: 1px black solid;
        position: absolute;
        left:800px
    }
    </style>
    <script type="text/javascript">
    window.onload=function()
    {
        //获取box1
        var box1=document.getElementById("box1");
        //获取btn01
        var btn01=document.getElementById("btn01");
        //定义一个timer变量
        var timer;
        //获取btn02
        var btn02=document.getElementById("btn02");
        
        //尝试创建一个可以执行简单的元素移动的函数
        //给函数传递参数
        //obj 要执行的动画对象
        //targetPoint 执行动画的目标位置
        //speed 动画移动速度(正数向右移动，负数向左移动)
        function moveTransverse(obj,targetPoint,speed)
        {
            //关闭上一个定时器
            clearInterval(timer);
            //获取元素目前的位置
            var currentPoint=parseInt(getComputedStyle(obj,null)["left"]);

            //判断速度的正负值
            //如果从0向800移动，则speed为正
            //如果从800向0移动，则speed为负
            if(currentPoint > targetPoint)//即在目标位置的右边，需要向左移动
            {
                //此时速度为负值
                speed=-speed;
            }
            
            //开启一个定时器，用来执行动画效果
            timer=setInterval(function()
            {
                //获取目标box的原来的left值
                var oldValue=parseInt(getComputedStyle(obj,null)["left"]);
                //在旧值的基础上增加
                var newValue=oldValue+speed;
                //判断newValue是否大于800
                //从800向0移动
                //向左移动时，需要判断newValue是否小于targetPoint
                //如果是向左移动，那么speed就是负值
                //向右移动时，需要判断newValue是否大于targetPoint
                if((speed<0 && newValue<targetPoint) || (speed>0 && newValue>targetPoint))
                {
                    newValue=targetPoint;
                }

                //将新值设置给box1
                obj.style.left=newValue+"px";
                //元素移动到目标点时,使其停止移动动画
                if(newValue == targetPoint)
                {
                    clearInterval(timer);
                }
            },30);
        }
        
        //下面这个方法需要考虑是否兼容IE8，为了方便，我直接使用getComputedStyle(obj,null)[name]
        /*
        function getStyle(obj,name)
        {
            if(window.getComputedStyle)
            {
                return getComputedStyle(obj,null)[name];
            }
            else
            {
                return obj.currentStyle[name];
            }
        }
        */
        //这种参数赋值方法只能是保证起始点没超过目标，从而正常开始，所以需要考虑全面
        btn01.onclick=function()
        {
            moveTransverse(box1,800,10);
        };
        btn02.onclick=function()
        {
            moveTransverse(box1,0,10);
        };

        //挑战任务，用上述类似的方法完成纵向的移动
    };
    </script>
</head>
<body>
    <button id="btn01">点击按钮，box1向右移动</button>
    <button id="btn02">点击按钮，box2向左移动</button>
    <br><br>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>